
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>邀请好友</title>
<link rel="stylesheet" href="/css/app/common.css">
<link rel="stylesheet"  href="/css/app/weChatFriendCome.css">
<script type="text/javascript" src="/js/app/jquery.min.js"></script>
<script src="/js/app/tip_pop.js"></script>
<script type="text/javascript">
  document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/50 + 'px';
  document.ontouchmove  = function(e){
	  e.preventDefault() ;
 }
</script>

<script type="text/javascript">
/*分页*/
$(document).ready(function(){
	var show_per_page = 10; 
	var number_of_items = $('#content').children().size();
	var number_of_pages = Math.ceil(number_of_items/show_per_page);
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);
	var navigation_html = '<a class="previous_link" href="javascript:previous();"><img src="/img/arrow-prev.png" alt="" /></a>';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
		current_link++;
	}
	navigation_html += '<a class="next_link" href="javascript:next();"><img src="/img/arrow-next.png" alt="" /></a>';
	$('#page_navigation').html(navigation_html);
	$('#page_navigation .page_link:first').addClass('active_page');
	$('#content').children().css('display', 'none');
	$('#content').children().slice(0, show_per_page).css('display', 'block');	
	
	var app_download_url_android = $("#wechat_main_url").val();
	var app_download_url_ios = $("#wechat_main_url").val();
	
	if(/android/i.test(navigator.userAgent)){
		$("#fn_download_app_url").val(app_download_url_android);
	}
	if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
		$("#fn_download_app_url").val(app_download_url_ios);
	}
	
	
});
function previous(){
	new_page = parseInt($('#current_page').val()) - 1;
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}
}
function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}
}
function go_to_page(page_num){
	var show_per_page = parseInt($('#show_per_page').val());
	start_from = page_num * show_per_page;
	end_on = start_from + show_per_page;
	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
	$('#current_page').val(page_num);
}

	
	/*弹窗*/
$(document).ready(function(){
    
        $(".region").bind("click",function(){
            $(".popup").show().animate({bottom: "0px"}, 300);
              $(".bg-popup").fadeIn(500);/*淡出0.5秒*/
        });

        $(".close").bind("click",function(){
            $('.popup').show().animate({bottom: "-300px"}, 300);
                $('.bg-popup').fadeOut(500);/*淡出.05秒*/
        });
		
		$(".bg-popup").bind("click",function(){
            $('.popup').show().animate({bottom: "-300px"}, 300);
                $('.bg-popup').fadeOut(500);/*淡出.05秒*/
        });

});
	
	function fn_choice_country(area_code) {
		var area_code_n = '+'+area_code;
		$("#default_area_code").html(area_code_n);
		$("#area_code_hidden").val(area_code_n);
        $('.popup').show().animate({bottom: "-300px"}, 300);
        $('.bg-popup').fadeOut(500);/*淡出.05秒*/
	}
	
	function fn_sendMsg(obj){
		var phone_n=$("#phone_n").val();
		var country=encodeURIComponent($("#default_area_code").html());
		var pattern = /^1[34578]\d{9}$/; 
		var reg=/^\d+$/;
	
		
		if(!phone_n){
			tip("请输入手机号",250);
			return false;
		}
		if(country=='%2B86' && phone_n.length!=11){
			tip("手机号码有误",250);
			return false;
		}
		if((reg.test(phone_n)&& phone_n.length==11) || (reg.test(phone_n)&& phone_n.length==10)){
			var url = "/v2/login/sendSms?type=2&country="+country+"&tel="+phone_n;
			
			$.ajax({
				type:"GET", 	
				url:url,	 		
				success: function (data) {
					if(data.state=="10001"){
						tip("缺少必选参数",250);
					}  
					if(data.state=="10000"){
						tip("参数错误，请参考API文档",250);
					}  
					if(data.state=="1017"){
						tip("国家代码无效",250);
					}  
					if(data.state=="10701"){
						tip("手机号码有误",250);
					}  
					 
					if(data.state=="10702"){
						tip("该手机号已注册",250);
					}  
					if(data.state=="1011"){
						tip("您的请求数量已达上线，请24小时后再试！",250);
					}  
					if(data.state=="1016"){
						tip("验证码发送间隔过短，请稍后再试",250);
					}  
					if(data.state=="200"){
						getCode($(obj));
						$("#btn").css("background","#ccc");
					}
				 },	 
			});
		}else{
			tip("手机号码有误",250);
			return false;
		} 
	}
	/* 验证码主函数 */
	function getCode(obj){
	  var num = 60
	  ,timer = null;
	  Countdown();
	  timer = setInterval(Countdown,1000);
	  /* 计数函数 */
	  function Countdown(){
	    if(num==1){
	      clearInterval(timer);
	      $("#btn").css("background","#f34546");
	      obj.html('获取验证码');
	      obj.addClass('clicked');
	    }else{
	      num--;
	      obj.html(num + '&nbsp;s');
	      
	    }
	  }
	};
	function fn_regSub() {
		var phone_n=$("#phone_n").val();
		var sms_no=$("#sms_no").val();
		var invite_no=$("#invite_no").val();
		var country=encodeURIComponent($("#default_area_code").html());
		var regSub_url = "/v2/login/regSub?type=2&country="+country+"&tel="+phone_n+"&sms_no="+sms_no+"&invite_no="+invite_no;
		var reg=/^\d+$/;
		if(!phone_n){
			tip("请输入手机号",250);
		}
		if(!sms_no){
			tip("请输入验证码",250);
		}
		if((reg.test(phone_n)&& phone_n.length==11) || (reg.test(phone_n)&& phone_n.length==10)){
			$.ajax({
				type:"POST", 	
				url:regSub_url,	
				beforeSend: function(request) {
		  			request.setRequestHeader("OS","wechat");
		  		 }, 
				success: function (data) {
					if(data.state=="10001"){
						tip("缺少必选参数",250);
					}  
					if(data.state=="10000"){
						tip("参数错误，请参考API文档",250);
					}  
					if(data.state=="1017"){
						tip("国家代码无效",250);
					}  
					if(data.state=="10701"){
						tip("手机号码格式错误",250);
					}  
					 
					if(data.state=="10702"){
						tip("该手机号已注册",250);
					}  
					if(data.state=="1013"){
						tip("验证码无效",250);
					}  
					if(data.state=="1014"){
						tip("验证码失效，请重新获取验证码",250);
					}  
					if(data.state=="200"){
						/* var weChatFriendAppDownload_url="/v2/friend/weChatFriendAppDownload?friend_invite_no="+invite_no+"&member_id="+data.result.cuid;
						$.ajax({
							type:"GET", 	
							url:weChatFriendAppDownload_url,	 	
						
							success: function (data) {
								$("body").html(data);
								$("title").html("邀请好友");
							 },	 
						}); */	
						var fn_download_app_url = $("#fn_download_app_url").val();
						window.location.href=fn_download_app_url;
					}  
				 },	 
			});
		}else{
			tip("手机号码格式错误",250);
		}
	}
	function fn_download_app(){
		var fn_download_app_url = $("#fn_download_app_url").val();
		window.location.href=fn_download_app_url;
	}
</script>

<script type="text/javascript">
var btmHeight = $('html').height();
$('html').css("height", btmHeight - 16);
</script>
<body>
<input type="hidden" id="area_code_hidden" value="+86" />
<input type="hidden" id="invite_no" value="${memberInfo.invite_no}" />

<input type="hidden" id="app_download_url_android" value="${app_download_url_android}" />
<input type="hidden" id="app_download_url_ios" value="${app_download_url_ios}" />
<input type="hidden" id="wechat_main_url" value="${wechat_main_url}" />
<input type="hidden" id="fn_download_app_url" value="" />

    <div id="main">
        <div id="content-content">
            <p class="head-portrait"><img src="${memberInfo.logo }" alt="" /></p>
            <p class="name">${memberInfo.nick_name}</p>
            <p class="invit">邀请你加入<span class="col-important">${app_name}</span></p>
            <p class="box box-1"><img src="/img/box.png" alt="" /></p>
            <p class="box box-2"><img src="/img/small_box.png" alt="" /></p>
            <div class="phone-number po-r">
                <p class="clearfix po-r">
                    <span class="region leftArea" id="default_area_code">+86</span>
                    <input type="text" id="phone_n" value=""  placeholder="请输入手机号" class="leftArea" maxlength="11" />
                    <span class="verification-code leftArea po-a"><button  id="btn"  onclick="fn_sendMsg(this)">获取验证码</button></span>
                </p> 
            </div>
            <p class="overseas">海外国际？<span class="col-important region">国际手机号码注册</span></p>
            <div class="phone-number po-r">
                <p class="clearfix po-r key">
                    <input type="text" id="sms_no" value="" placeholder="输入验证码" maxlength="6" class="" />
                </p>
            </div>
            <p class="btn-join"><button onclick="fn_regSub()" style="font-size:16px;">注册</button></p>
        </div>
    </div>

	<div class="bg-popup"></div>
	<div class="popup">
		<div class="fix-top po-r">
			<h2 class="po-r">所在地区<span class="po-a"><img src="/img/close.png" alt="" class="close" /></span></h2>
		</div>
		<input type='hidden' id='current_page' />
		<input type='hidden' id='show_per_page' />
			<div id='content'>
				<c:forEach items="${phoneNumPrefixList}" var="c">
		                	<p onclick="fn_choice_country(${c.area_code})">${c.name}(${c.area_code}) </p>
		        </c:forEach>
			</div>
		<div class="footer-inner clearfix">
			<div id='page_navigation' class="leftArea"></div>
			<span class="rightArea">完成</span>
		</p>
	</div>
</body>
</html>